<template>
    <el-menu 
        :default-active="activeIndex" 
        class="el-menu-demo d-flex align-items-center" 
        mode="horizontal" 
        :ellipsis="false"
        @select="handleSelect"
        :background-color="props.menuPram.bgColor"
        :active-text-color="props.menuPram.activeTextColor"
        router
        :style="{borderBottom:menuPram.borderBottom}" 
    >
        <el-menu-item class="p-0" index="/bi_frontend"><el-image style="margin-top: 20px;" src="/bi_frontend/imgs/logo-dw-4-lite.png" /></el-menu-item>
        <div v-if="menuPram.isBetween" class="flex-grow" />
        <template v-for="(item, index) in menuPram.menus" >
            <el-menu-item 
                v-if="item.menuchilds.length > 0"
                class="menu-item position-relative" 
                :disabled="item.disabled" 
                @mouseover="mouseover(index)"
                @mouseleave="mouseleave(index)"
            >
                <template #title >{{item.menuName}}</template>
                <el-card v-if="item.menuchilds.length > 0 && data.activeIndex == index && data.activeIndexFlag" class="position-absolute subMenu-item">
                    <el-row>
                        <el-col :span="8" v-for="(subItem, index) in item.menuchilds" class="p-5">
                            <div class="subMenu-title" @click="push(subItem.path)">{{ subItem.menuName }}</div>
                            <div class="subMenu-sub-title" v-for="(subSubItem, subindex) in subItem.menuchilds" @click="push(subSubItem.path)">
                                <el-icon>
                                    <component :is="subSubItem.icon"></component>
                                </el-icon>
                                {{ subSubItem.menuName}}
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
                
            </el-menu-item>
            <el-menu-item v-else class="menu-item"  :index="item.path">
                <template #title >{{item.menuName}}</template>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { useRouter } from "vue-router"
    
    const props = defineProps([
        'menuPram'
    ])

    const router = useRouter();
    const activeIndex = ref('')

    const data = reactive({
        activeIndex: 0,
        activeIndexFlag: false
    })

    const handleSelect = (key: string, keyPath: string[]) => {
        // console.log(key, keyPath)
    }
    /**
     * 点击子菜单路由跳转
     */
    const push = (url:string) => {
        if(url) {
            router.push(url)
        }
    }
    /**
     * 鼠标悬停显示子菜单
     */
    const mouseover = (index:number) => {
        data.activeIndex = index
        data.activeIndexFlag = true
    }
    /**
     * 鼠标离开关闭子菜单
     */
    const mouseleave = (index:number) => {
        data.activeIndexFlag = false
    }
</script>

<style scoped>
    .flex-grow {
        flex-grow: 1;
    }
    .menu-item {
        color: #2A302F;
        font-size: 20px;
        font-weight: 500;
        line-height: 40px;
    }
    .el-menu-item:hover {
        background-color: inherit !important;
        color: #60A600 !important;
        /* border-bottom: 3px solid #60A600 !important; */
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom: inherit;
    }
    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
        outline: 0;
        /* color: var(--el-menu-hover-text-color); */
        background-color: #FFF;
    }
    .subMenu-item{
        top: 38px;
        right:-150px;
    }
    .el-card{
        width: 950px;
    }
    .subMenu-title {
        font-size: 18px;
        border-bottom: 2px solid #337ecc;
    }
    .subMenu-title:nth-of-type(n+2){
        padding-top: 10px;
    }
    .subMenu-sub-title {
        font-size: 16px;
    }
</style>